import QtQuick 2.0
import QtQuick.Controls 2.12

Item {
    anchors.left: parent.left
    anchors.right: parent.right
    height: 200
    MouseArea {
        anchors.fill: parent
        hoverEnabled: true
        onEntered: {
            leftIniImg.visible = true
            rightIniImg.visible = true
            cursorShape = Qt.PointingHandCursor
            startAni.stop()
        }
        onExited: {
            leftIniImg.visible = false
            rightIniImg.visible = false
            cursorShape = Qt.ArrowCursor
            startAni.start()
        }
    }
    Image {
        id: leftIniImg
        visible: false
        anchors.left: parent.left
        anchors.verticalCenter: parent.verticalCenter
        source: "qrc:/img/Resources/cherryPick/leftArrow.png"
        width: 50
        height: 100
    }
    Image {
        id: rightIniImg
        visible: false
        anchors.right: parent.right
        anchors.verticalCenter: parent.verticalCenter
        source: "qrc:/img/Resources/cherryPick/rightArrow.png"
        width: 50
        height: 100
    }
    Timer {
        id: startAni
        repeat: true
        running: true
        interval: 2000
        onTriggered: {
            carowselModel.append(carowselModel.get(0));     // 尾部插入第一张图片
            carowselModel.remove(0);    // 移除第一张图片
            carouselIndicatorAnimtion.start()
        }
    }

    // 轮播图
    Item {
        clip: true
        width: flick.width * 0.89
        height: parent.height
        anchors.left: parent.left
        anchors.top: parent.top
        anchors.leftMargin: 55
        ListModel {
            id: carowselModel
            ListElement { src: "qrc:/img/Resources/cherryPick/1.png" }
            ListElement { src: "qrc:/img/Resources/cherryPick/2.png" }
            ListElement { src: "qrc:/img/Resources/cherryPick/3.png" }
            ListElement { src: "qrc:/img/Resources/cherryPick/4.png" }
            ListElement { src: "qrc:/img/Resources/cherryPick/5.png" }
            ListElement { src: "qrc:/img/Resources/cherryPick/6.png" }
        }
        ListView {
            id: carowselRow
            spacing: 20
            orientation: ListView.Horizontal    // 横向
            anchors.left: parent.left
            anchors.right: parent.right
            height: 160
            model: carowselModel
            enabled: false
            property real m_scale: (carowselRow.width / 950 - 1) * 0.4 + 1
            // 移除动画
            remove: Transition {
                NumberAnimation {
                    property: "x"
                    from: 0
                    to: -460
                    duration: 950
                }
            }
            // 移除过度动画
            removeDisplaced: Transition {
                NumberAnimation {
                    property: "x"
                    duration: 1000
                }
            }
            delegate: Rectangle {
                width: 460
                height: 160
                radius: 10
                clip: true
                color: "transparent"
                // 约束每张图片的大小
                Image {
                    id: carouselImg
                    anchors.centerIn: parent
                    source: src
                    width: parent.width
                    height: parent.height
                    //                                scale: 0.9

                }
            }
        }
        Item {
            id: carouselIndicatorItem
            anchors.top: carowselRow.bottom
            anchors.topMargin: 20
            anchors.horizontalCenter: parent.horizontalCenter
            width: 95
            height: 10
            property var widthArray: [0, 6, 8, 10, 8, 6, 0] // 记录点的位置以制作动画
            property var posArray: []   // 记录点的位置以制作动画
            Rectangle {
                id: indicator0
                width: carouselIndicatorItem.widthArray[0]
                height: width
                radius: height / 2
                color: "#a1a1a3"
                anchors.verticalCenter: parent.verticalCenter
                Component.onCompleted: {
                    parent.posArray.push(x)
                    parent.posArray.reverse()   // 数组翻转
                    // 因为qml构造是从下往上，得出插入数组的数值也是从下往上插入的，所以需要翻转一下
                }
            }
            Rectangle {
                id: indicator1
                width: carouselIndicatorItem.widthArray[1]
                height: width
                radius: height / 2
                color: "#a1a1a3"
                anchors.verticalCenter: parent.verticalCenter
                x: indicator0.x + 10 + indicator0.width
                Component.onCompleted: {
                    parent.posArray.push(x)
                }
            }
            Rectangle {
                id: indicator2
                width: carouselIndicatorItem.widthArray[2]
                height: width
                radius: height / 2
                color: "#a1a1a3"
                anchors.verticalCenter: parent.verticalCenter
                x: indicator1.x + 10 + indicator1.width
                Component.onCompleted: {
                    parent.posArray.push(x)
                }
            }
            Rectangle {
                id: indicator3
                width: carouselIndicatorItem.widthArray[3]
                height: width
                radius: height / 2
                color: "#a1a1a3"
                anchors.verticalCenter: parent.verticalCenter
                x: indicator2.x + 10 + indicator2.width
                Component.onCompleted: {
                    parent.posArray.push(x)
                }
            }
            Rectangle {
                id: indicator4
                width: carouselIndicatorItem.widthArray[4]
                height: width
                radius: height / 2
                color: "#a1a1a3"
                anchors.verticalCenter: parent.verticalCenter
                x: indicator3.x + 10 + indicator3.width
                Component.onCompleted: {
                    parent.posArray.push(x)
                }
            }
            Rectangle {
                id: indicator5
                width: carouselIndicatorItem.widthArray[5]
                height: width
                radius: height / 2
                color: "#a1a1a3"
                anchors.verticalCenter: parent.verticalCenter
                x: indicator4.x + 10 + indicator4.width
                Component.onCompleted: {
                    parent.posArray.push(x)
                }
            }
            Rectangle {
                id: indicator6
                width: carouselIndicatorItem.widthArray[6]
                height: width
                radius: height / 2
                color: "#a1a1a3"
                anchors.verticalCenter: parent.verticalCenter
                x: indicator5.x + 10 + indicator5.width
                Component.onCompleted: {
                    parent.posArray.push(x)
                }
            }

            // 串行动画
            SequentialAnimation {
                id: carouselIndicatorAnimtion
                alwaysRunToEnd: true
                // 并行动画
                ParallelAnimation {
                    alwaysRunToEnd: true
                    PropertyAnimation {
                        target: indicator1
                        properties: "height,width"
                        from: 6
                        to: 0
                        duration: 1000
                        alwaysRunToEnd: true    // 永远保持动画运行，不中断
                    }
                    NumberAnimation {
                        target: indicator1
                        properties: "x"
                        from: indicator1.x
                        to: 0
                        duration: 1000
                        alwaysRunToEnd: true
                    }

                    PropertyAnimation {
                        target: indicator2
                        properties: "height,width"
                        from: 8
                        to: 6
                        duration: 1000
                        alwaysRunToEnd: true    // 永远保持动画运行，不中断
                    }
                    NumberAnimation {
                        target: indicator2
                        properties: "x"
                        from: indicator2.x
                        to: indicator1.x
                        duration: 1000
                        alwaysRunToEnd: true
                    }

                    PropertyAnimation {
                        target: indicator3
                        properties: "height,width"
                        from: 10
                        to: 8
                        duration: 1000
                        alwaysRunToEnd: true    // 永远保持动画运行，不中断
                    }
                    NumberAnimation {
                        target: indicator3
                        properties: "x"
                        from: indicator3.x
                        to: indicator2.x
                        duration: 1000
                        alwaysRunToEnd: true
                    }

                    PropertyAnimation {
                        target: indicator4
                        properties: "height,width"
                        from: 8
                        to: 10
                        duration: 1000
                        alwaysRunToEnd: true    // 永远保持动画运行，不中断
                    }
                    NumberAnimation {
                        target: indicator4
                        properties: "x"
                        from: indicator4.x
                        to: indicator3.x
                        duration: 1000
                        alwaysRunToEnd: true
                    }

                    PropertyAnimation {
                        target: indicator5
                        properties: "height,width"
                        from: 6
                        to: 8
                        duration: 1000
                        alwaysRunToEnd: true    // 永远保持动画运行，不中断
                    }
                    NumberAnimation {
                        target: indicator5
                        properties: "x"
                        from: indicator5.x
                        to: indicator4.x
                        duration: 1000
                        alwaysRunToEnd: true
                    }

                    PropertyAnimation {
                        target: indicator6
                        properties: "height,width"
                        from: 0
                        to: 6
                        duration: 1000
                        alwaysRunToEnd: true    // 永远保持动画运行，不中断
                    }
                    NumberAnimation {
                        target: indicator6
                        properties: "x"
                        from: indicator6.x
                        to: indicator5.x
                        duration: 1000
                        alwaysRunToEnd: true
                    }
                }
                // 脚本动画
                ScriptAction {
                    script: {
                        indicator0.width = carouselIndicatorItem.widthArray[0];
                        indicator1.width = carouselIndicatorItem.widthArray[1];
                        indicator2.width = carouselIndicatorItem.widthArray[2];
                        indicator3.width = carouselIndicatorItem.widthArray[3];
                        indicator4.width = carouselIndicatorItem.widthArray[4];
                        indicator5.width = carouselIndicatorItem.widthArray[5];
                        indicator6.width = carouselIndicatorItem.widthArray[6];
                        indicator0.x = carouselIndicatorItem.posArray[0]
                        indicator1.x = carouselIndicatorItem.posArray[1]
                        indicator2.x = carouselIndicatorItem.posArray[2]
                        indicator3.x = carouselIndicatorItem.posArray[3]
                        indicator4.x = carouselIndicatorItem.posArray[4]
                        indicator5.x = carouselIndicatorItem.posArray[5]
                        indicator6.x = carouselIndicatorItem.posArray[6]
                    }
                }
            }
        }
    }
}
